<template>
  <div class="task-detail">
    <nav-header
      :headerTitle="'任务详情'"
      :navBgColor="'#fff'"
      :isNext="false"
      :isNavBack="true"
      :isNedMsg="false"
    ></nav-header>
    <div class="content">
      <div class="task-list">
        <task-list-item
          :listItem="item"
          :pageName="'taskDetail'"
          @tapToDetail="clickTapToArtDetail"
        ></task-list-item>
      </div>
    </div>
    <div class="button-wrapper">
      <button class="btn-big" @click.stop="getTakeTask" v-show="isBtnBigShow">{{btnBigText}}</button>
    </div>
    <ModalCopy :ModalCopy.sync="ModalCopy" @ModalCopyClick="copyClick"></ModalCopy>
  </div>
</template>

<script type="text/ecmascript-6">
import mixin from '@/utils/mixin'
import NavHeader from '@/components/NavHeader'
import TaskListItem from '@/components/TaskListItem'
import ModalCopy from "@/components/ModalCopy"
import { Dialog, ImagePreview } from 'vant'

Vue.use(ImagePreview)

export default {
  name: 'taskDetail',
  mixins: [mixin],
  props: [],
  data () {
    return {
      btnBigText: '',
      isBtnBigShow: false,
      inuniqueId: '',
      // inuniqueId: 'hhh2',
      adId: '',
      // 首页组件获取到的当前任务数据
      // item: JSON.parse(sessionStorage.getItem('taskItemString')),
      item: {},
      itemInfo: {},
      ModalCopy: {},
    }
  },
  mounted () {
    let query = this.$route.query;
    if (query) {
      this.inuniqueId = query.inuniqueId;
      this.adId = query.adId
    }

    this.getWxAdmin()
    this.getTaskInfoByForwardId()
  },
  computed: {
  },
  methods: {
    // 获取用户uniqueId
    // getInuniqueId () {
    //   if (this.isNull(window.localStorage.getItem('uniqueIdByInfluencer'))) {
    //     this.inuniqueId = ''
    //   } else {
    //     this.inuniqueId = localStorage.getItem('uniqueIdByInfluencer')
    //   }
    // },
    // 获取管理员微信号
    getWxAdmin () {
      this.$http.post('/soft/getWapConfig', {}).then(
        res => {
          let wapConfig = res.data;
          this.ModalCopy = {
            isModal: false,
            title: '您还不是流量主，暂时无法接任务。请先添加微信管理员，开通流量主权限。',
            name: `微信号：${wapConfig.adminWxNum}`,
            copy: wapConfig.adminWxNum,
            rightBtn: '复制微信号'
          }
        },
        err => {
          console.log(err)
        }
      )

    },
    // 复制微信号
    copyClick () {
      this.copy('.btn')
    },
    // 获取任务详情
    getTaskInfoByForwardId () {
      console.log(this.inuniqueId)
      console.log(this.adId)
      this.$http.post('/flowForward/getTaskInfoByForwardId', {
        uniqueId: this.inuniqueId,
        adId: this.adId
      }).then(
        res => {
          this.item = res.data
          this.titleAndBtnText()
        },
        err => {
          console.log(err)
        }
      )
    },
    // 点击任务内容进入内容详情
    clickTapToArtDetail (currentAdId) {
      sessionStorage.setItem('taskItemString', JSON.stringify(this.item))
      sessionStorage.setItem('adIdByInfluencer', this.item.id)
      if (this.item.adType === 2) {
        this.$router.push({
          path: "/adIndex/articleDetail",
          query: {
            articleId: this.item.adArticleId,
            articleTitle: this.item.adArticleTitle,
            shareUniqueId: this.item.uniqueId
          }
        })
      }
    },
    // 底部按钮样式改变
    titleAndBtnText () {
      // console.log(this.item)
      if (this.item && this.item.forwardAuditStatus !== undefined) {
        if (this.item.forwardAuditStatus === 0 || this.item.forwardAuditStatus === 3) {
          this.isBtnBigShow = true
          this.btnBigText = '去完成任务'
        } else {
          this.isBtnBigShow = false
        }
      } else if (this.item.forwardAuditStatus === undefined) {
        if (this.item.adLaunchStatus === 1) {
          this.isBtnBigShow = true
          this.btnBigText = '接任务'
        } else {
          this.isBtnBigShow = false
        }
        return false
      }
    },
    // 获取继续任务后台的任务状态
    getTaskContinueInfo () {
      this.$http.post('/flowForward/getTaskInfoByForwardId', {
        uniqueId: this.inuniqueId,
        adId: this.adId
      }).then(
        res => {
          let resData = res.data
          if ([4, 5, 6].includes(resData.forwardAuditStatus)) {
            this.$router.push({
              path: '/infMine/msgState',
              query: {
                inuniqueId: this.inuniqueId,
                adId: this.adId
              }
            })
          } else {
            this.$router.push({
              path: '/infIndex/taskCourse',
              query: {
                inuniqueId: this.inuniqueId,
                adId: this.adId
              }
            })
          }
        },
        err => {
          console.log(err)
        }
      )
    },
    // 接任务接口
    getTakeTask () {
      console.log(this.inuniqueId)
      console.log(this.adId)
      if (this.item.forwardAuditStatus === undefined) {
        if (!this.inuniqueId) {
          // 未登录
          Dialog.confirm({
            message: '您还没有登录，请先登录',
            confirmButtonText: '登录'
          }).then(() => {
            window.sessionStorage.setItem("appKey" , null) ;
            window.sessionStorage.setItem("jmsz" , null) ;  
            window.sessionStorage.removeItem("appKey");
            window.sessionStorage.removeItem("appKejmszy");
            this.$router.replace('/infLogin/login');
          }).catch(() => {
            return false
          })
          return false
        }
        this.$http.post('/flowForward/takeTask', {
          uniqueId: this.inuniqueId,
          adId: this.adId
        }).then(
          res => {
            let headData = res.head
            let takeTaskCode = headData.code
            if (takeTaskCode === 124) {
              // 尚未完善资料
              Dialog.confirm({
                message: '您尚未完善资料',
                confirmButtonText: '去完善'
              }).then(() => {
                this.goUrl('/infLogin/improveInfo')
              }).catch(() => {
                return false
              })
            } else if (takeTaskCode === 176) {
              // 领任务超过了10条
              Dialog.alert({
                message: 'Hi,您今天已经完成了10条任务了，明天再来接任务赚钱吧。',
                confirmButtonText: '确定'
              }).then(() => {
                return false
              })
            } else if (takeTaskCode === 177) {
              // 任务不能重复领取
              Dialog.alert({
                message: '亲，任务不能重复领取',
                confirmButtonText: '确定'
              }).then(() => {
                return false
              })
            } else if (takeTaskCode === 178) {
              // 任务被领取完
              Dialog.alert({
                message: '对不起，该任务已经被领取完毕 请确定重新刷新后查看可接任务',
                confirmButtonText: '刷新任务'
              }).then(() => {
                window.location.reload();
              })
            } else if (takeTaskCode === 179) {
              // 未加管理员微信号弹窗
              this.ModalCopy.isModal = true
            } else if (takeTaskCode === 180) {
              let msgAdid = headData.msg.split(',')[0]
              console.log(msgAdid)
              sessionStorage.setItem('adIdByInfluencer', msgAdid)
              // 还有未提交任务
              Dialog.alert({
                message: '您还有任务未上传图片哦',
                confirmButtonText: '确定'
              }).then(() => {
                this.$router.push({
                  path: '/infIndex/taskCourse',
                  query: {
                    inuniqueId: this.inuniqueId,
                    adId: msgAdid
                  }
                })
              })
            } else if (takeTaskCode === 200) {
              // 任务领取成功
              this.$router.push({
                path: '/infIndex/taskCourse',
                query: {
                  inuniqueId: this.inuniqueId,
                  adId: this.adId
                }
              })
            }
          },
          err => {
            console.log(err.data.head)
          }
        )
      } else {
        this.getTaskContinueInfo()
      }
    },
  },
  components: {
    NavHeader,
    TaskListItem,
    ModalCopy
  }
}
</script>

<style lang="scss">
@import '~@/assets/css/common.scss';
// ImagePreview组件样式更改
.van-image-preview {
  z-index: 999999 !important;
}
.task-detail {
  width: 100%;
  height: 100%;
  padding: 0 32px;
  box-sizing: border-box;
  // ModalCopy组件的样式修改
  .ModalCopy {
    padding: 0;
  }
  .ModalCopy .divOne {
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
  }

  .content {
    width: 100%;
    height: 100%;
    margin-top: 112px;
    // .task-list {
    // }
  }
  .button-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 152px;
    box-sizing: border-box;
    @include center;
    .btn-big {
      // width: 750px;
      width: 654px;
      height: 88px;
      background: rgba(254, 37, 37, 1);
      border-radius: 44px;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 88px;
    }
  }
}
</style>
